<!DOCTYPE HTML>
<html>
<head>
    <title>pixi.js example 15 - Filters</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000000;
        }
    </style>
    
    <script src="../../bin/pixi.dev.js"></script>
</head>
<body>
    <script>
    var renderer = PIXI.autoDetectRenderer(620, 380);
    
    // create an new instance of a pixi stage
    var stage = new PIXI.Stage(0xFFFFFF);
    
    stage.interactive = true;
    
    var bg = PIXI.Sprite.fromImage("BGrotate.jpg");
    bg.anchor.x = 0.5;
    bg.anchor.y = 0.5;
     
    bg.position.x = 620 / 2;
    bg.position.y = 380 / 2;
    
    var colorMatrix =  [1,0,0,0,
                        0,1,0,0,
                        0,0,1,0,
                        0,0,0,1];
                        
    var filter = new PIXI.ColorMatrixFilter();
    
    var container = new PIXI.DisplayObjectContainer();
    container.position.x = 620 / 2;
    container.position.y = 380 / 2;
    
    var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg");
    bgFront.anchor.x = 0.5;
    bgFront.anchor.y = 0.5;
     
    container.addChild(bgFront);
    
    var light2 = PIXI.Sprite.fromImage("LightRotate2.png");
    light2.anchor.x = 0.5;
    light2.anchor.y = 0.5;
    container.addChild(light2);
    
    var light1 = PIXI.Sprite.fromImage("LightRotate1.png");
    light1.anchor.x = 0.5;
    light1.anchor.y = 0.5;
    container.addChild(light1);
    
    var panda =  PIXI.Sprite.fromImage("panda.png");
    panda.anchor.x = 0.5;
    panda.anchor.y = 0.5;
    
    container.addChild(panda);
    
    stage.addChild(container);
    
    // create a renderer instance
    renderer.view.style.position = "absolute"
    renderer.view.style.width = window.innerWidth + "px";
    renderer.view.style.height = window.innerHeight + "px";
    renderer.view.style.display = "block";
    
    // add render view to DOM
    document.body.appendChild(renderer.view);
    
    stage.filters = [filter];
    
    var count = 0;
    var switchy = false;
    
    stage.click = stage.tap = function()
    {
        switchy = !switchy
        
        if(!switchy)
        {
            stage.filters = [filter];
        }
        else
        {
            stage.filters = null;
        }
    }
    
    // Add a pixi Logo!
    var logo = PIXI.Sprite.fromImage("../../logo_small.png");
    
    logo.anchor.x = 1;
    logo.position.x = 620
    logo.scale.x = logo.scale.y = 0.5;
    logo.position.y = 320;
    logo.interactive = true;
    logo.buttonMode = true;
    
    logo.click = logo.tap = function()
    {
        window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank");
    }
    
    var help = new PIXI.Text("Click to turn filters on / off.", { font: "bold 12pt Arial", fill: "white" });
    help.position.y = 350;
    help.position.x = 10;
    stage.addChild(help);
    
    function animate() {
        bg.rotation += 0.01;
        bgFront.rotation -= 0.01;
        
        light1.rotation += 0.02;
        light2.rotation += 0.01;

        panda.scale.x = 1 + Math.sin(count) * 0.04;
        panda.scale.y = 1 + Math.cos(count) * 0.04;
        
        count += 0.1;
        
        colorMatrix[1] = Math.sin(count) * 3;
        colorMatrix[2] = Math.cos(count);
        colorMatrix[3] = Math.cos(count) * 1.5;
        colorMatrix[4] = Math.sin(count / 3) * 2;
        colorMatrix[5] = Math.sin(count / 2);
        colorMatrix[6] = Math.sin(count / 4);
        filter.matrix = colorMatrix;

        renderer.render(stage);
        requestAnimFrame(animate);
    }

    requestAnimFrame(animate);
    </script>

    </body>
</html>
